// 此页面是数据可视化右边充电占比的动态有数据时才显示

$(function () {
  var colorList = ["#efd70f", "#f041d9", "#16ee7c"];

  option = {
    // 控制title位置、样式
    title: {
      text: "报警比例",
      x: "center",
      y: "43%",
      textStyle: {
        fontSize: 14,
        color: "#fff",
      },
    },
    tooltip: {
      trigger: "item",
    },
    // 控制圆环样式
    series: [
      {
        type: "pie",
        center: ["50%", "50%"],
        radius: ["50%", "65%"],

        clockwise: true,
        avoidLabelOverlap: true,
        hoverOffset: 3,
        itemStyle: {
          normal: {
            color: function (params) {
              return colorList[params.dataIndex];
            },
          },
        },
        // 隐藏字体，用%代替
        label: {
          show: true,
          position: "outside",
          formatter: "{b}{d}%",
          fontSize: 12,
          color: "#00dc50",
        },
        // 标签的视觉引导线样式
        labelLine: {
          normal: {
            length: 10,
            length2: 5,
            lineStyle: {
              width: 1,
            },
          },
        },
        // 控制%
        data: [
          {
            name: "其他异常",
            value: 74,
          },
          {
            name: "今日故障",
            value: 25,
          },
          {
            name: "今日火警",
            value: 1,
          },
        ],
      },
    ],
  };
  var preWarningSystem = echarts.init(
    $(".preWarningSystem #answerPicturess")[0]
  );
  preWarningSystem.setOption(option);
});
